<template>
  <div>
    <div style="background-color: #876c5f;color: white">
      <div style="height: 60px;font-size: 30px;line-height: 60px">
        <div style="width: 1200px;margin: 0 auto">
        <i class="el-icon-shopping-cart-2" style="margin-left:10px;font-size: 40px;color: white;margin-right: 10px;position: relative;top: 3px"></i>我的购物车
    </div></div>
    </div>
    <div style="width:1200px;min-height:702px;background-color: white;margin: 0 auto">
      <template>
        <el-table
            ref="multipleTable"
            :data="cartArr"
            tooltip-effect="dark"
            style="width: 100%;font-size: 20px"
            @selection-change="handleSelectionChange"
            @select="handleSelect"
            @select-all="handleSelectAll">
          <el-table-column
              type="selection"
              width="100"
          align="center">
          </el-table-column>
          <el-table-column label="商品图片" align="center">
            <template slot-scope="scope">
              <el-image :src="scope.row.url" style="width: 100px"></el-image>
            </template>
          </el-table-column>
          <el-table-column
              prop="name"
              label="商品名"
              width="300"
              align="center">
          </el-table-column>
          <el-table-column
              prop="price"
              label="单价"
              width="150"
              align="center">
          </el-table-column>
          <el-table-column label="数量" width="150" align="center">
            <template slot-scope="scope">
                <el-input-number size="mini" v-model="scope.row.count" @change="handleChange(scope.row.id,scope.row.count)" :min="1" :max="100" label="商品数量"></el-input-number>
            </template>
          </el-table-column>
          <el-table-column label="操作" align="center">
            <!--scope代表每行对应的数据,里面的index属性代表下标,
                        里面的row代表每行对应的数组中的对象-->
            <template slot-scope="scope">
              <!--confirm确认事件-->
              <el-popconfirm
                  confirm-button-text='确认'
                  cancel-button-text='取消'
                  icon="el-icon-info"
                  icon-color="red"
                  title="确认移除购物车吗？"
                  @confirm="handleDelete(scope.$index, scope.row)">
                <i class="el-icon-delete" slot="reference"></i>
              </el-popconfirm>
            </template>
          </el-table-column>
        </el-table>
      </template>
    </div>
<!-- <div style="width:1200px;background-color: white;margin: 0 auto;">
      <div style="width: 150px;padding: 20px 0;margin:0 auto">
      <el-pagination
          background
          layout="prev, pager, next"
          :total="num"
          :current-page="currentPage"
          @current-change="handlePageChange">
      </el-pagination></div>
    </div>-->
    <div style="width:1200px;height:60px;background-color: white;margin: 10px auto;position: relative">
      <div style="font-size: 22px;height: 60px;line-height: 60px;font-weight: bold;position: absolute;right: 10px">合计:<span style="color: red;font-size: 28px;font-weight: bold">￥{{sum}}</span>
        <el-button style="background-color:#876c5f;color: white;position: relative;left: 10px;bottom:3px;
        height: 60px;font-size: 20px" @click="handleClear">去结算</el-button>
      </div>
    </div>
  </div>
</template>

<script>
import axios from "axios";

export default {
  data() {
    return {
      cartArr:[],
      multipleSelection: '',
      count:0,
      sum:0
    }
  },
  created() {
    let user = sessionStorage.getItem('user')
    if (user==null){
      location.href="/login"
    }else {
      sessionStorage.removeItem("_pro")
      let cartUrl = 'http://localhost:8080/carts/myCart'
      axios.get(cartUrl).then((response) => {
        let json = response.data
        this.cartArr = json.data
        let account = 0;
        for (let cart of this.cartArr) {
          account = account + cart.price * cart.count
        }
        account = account.toFixed(2)
        this.sum = account

      })
    }
  },
  methods: {
    handleSelectionChange(selection) {
      this.multipleSelection = selection;
    },
    /*handlePageChange(val){
      let cartUrl = 'http://localhost:8080/carts/myCart'
      axios.get(cartUrl).then((response) => {
        let json = response.data
        this.cartArr = json.data
      })
    },*/
    handleDelete(index,row){
      let url = 'http://localhost:8080/carts/'+row.id+'/delete'
      axios.get(url).then((response) => {
        this.cartArr.splice(index,1)
      })
      this.sum = (this.sum-row.count*row.price).toFixed(2)
    },
    handleChange(id,value){
      let url = 'http://localhost:8080/carts/change/'+id+'/'+value
      axios.get(url).then((response) => {
        let account = 0;
        for (let cart of this.cartArr) {
          if (cart.id != id) {
            account = account + cart.count * cart.price
          }else {
            account = account + cart.price*value
          }
        }
        account = account.toFixed(2)
        this.sum = account
      })
    },
    handleClear(){
      console.log(this.multipleSelection)
      let arr = []
      console.log(arr)
      if (this.multipleSelection==''){
        this.$message.error("你还没有选中商品!")
        return
      }
      let selections = []
      for (let selection of this.multipleSelection) {
        selections.push(selection.id)
      }
      console.log(selections)
       location.href="/clear?selections="+selections
    },
    handleSelect(selection){
      console.log(selection)
      let account = 0
      for (let s of selection) {
        account = account+s.price*s.count
      }
      account = account.toFixed(2)
      this.sum = account
    },
    handleSelectAll(selection){
      console.log(selection)
      let account = 0
      for (let s of selection) {
        account = account+s.price*s.count
      }account = account.toFixed(2)
      this.sum = account
    }
  }
}
</script>

